<template>
  <div id="gazelleCir"></div>
</template>

<script>
import * as echarts from "echarts";
import { getComForCity } from "@/api/info.js";

export default {
  name: "CompanyCityChart",
  data() {
    return {
            colorList: [
        { coordinate: "南昌", color: "#6EDB6F" },
        { coordinate: "九江", color: "#2D2CDB" },
        { coordinate: "上饶", color: "#0BDB00" },
        { coordinate: "抚州", color: "#DB63A8" },
        { coordinate: "吉安", color: "#DB960B" },
        { coordinate: "赣州", color: "#DB4017" },
        { coordinate: "萍乡", color: "#8158DB" },
        { coordinate: "新余", color: "#DB9818" },
        { coordinate: "宜春", color: "#0B67DB" },
        { coordinate: "鹰潭", color: "#58D4DB" },
        { coordinate: "景德镇", color: "#D4D9C3" },
      ],
      gazelleCityList: [
        { coordinate: "南昌市", number: 60 },
        { coordinate: "九江市", number: 40 },
        { coordinate: "上饶市", number: 30 },
        { coordinate: "抚州市", number: 20 },
        { coordinate: "吉安市", number: 15 },
        { coordinate: "赣州市", number: 25 },
        { coordinate: "萍乡市", number: 20 },
        { coordinate: "新余市", number: 18 },
        { coordinate: "宜春市", number: 10 },
        { coordinate: "鹰潭市", number: 15 },
        { coordinate: "景德镇市", number: 8 },
      ],
    };
  },
  async mounted() {
    await this.getInfo()
    this.initCirCanvas();
  },
  methods: {
    async getInfo() {
      let res = await getComForCity();
      if (res.code === 200) {
        this.gazelleCityList = res.data
      }
    },
    initCirCanvas() {
      let that = this;
      let colorList = this.colorList;
      var myChart = echarts.init(document.getElementById("gazelleCir"), null, {
        width: 380,
        height: 360,
      });
      let option = {
        dataset: {
          dimensions: ["coordinate", "number"],
          source: this.gazelleCityList,
        },
        title: {
          text: "江西瞪羚企业城市分布",
          left: "left",
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,0.4)",
          textStyle: {
            color: "#fff",
          },
          borderWidth: 0,
          formatter: (params) => {
            return `<div">
              <div> 瞪羚企业 </div>
              <div> ${params.data.coordinate} :  ${params.data.number} </div>
            </div>`;
          },
        },
        legend: {
          orient: "horizontal",
          top: "bottom",
          width: 300,
        },
        series: [
          {
            name: "瞪羚企业",
            type: "pie",
            radius: "50%",
            label: {
              formatter: (params) => {
                return params.data.number;
              },
            },
            itemStyle: {
              color: function (params) {
                let findItem = colorList.find((item) => {
                  return item.coordinate === params.name;
                });
                return findItem.color;
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };

      let currentIndex = -1;

      setInterval(function () {
        var dataLen = that.gazelleCityList.length;
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        currentIndex = (currentIndex + 1) % dataLen;
        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: currentIndex,
        });
      }, 1000);
    },
  },
};
</script>

<style>
</style>